<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏夹</title>
    <link rel="stylesheet" href="/static/collectpost.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
<!-- 修改后的搜索框 -->
<div class="container">
    <h1 class="animate__animated animate__fadeInDown">我的收藏</h1>

    <div class="search-bar">
        <input
                type="text"
                class="search-input"
                placeholder="🔍 输入关键词搜索收藏内容..."
                id="searchInput"
        >
    </div>

    <div class="posts-grid" id="postsGrid">
        <!-- 动态加载内容 -->
    </div>
</div>
<script>
    $(document).ready(function() {
        const token = localStorage.getItem('token');
        let allPosts = [];

        // 渲染函数
        function renderPosts(posts) {
            const grid = document.getElementById('postsGrid');
            grid.innerHTML = '';

            if (posts.length === 0) {
                grid.innerHTML = `
                        <div class="empty-state animate__animated animate__fadeIn">
                            <h3>暂无收藏内容</h3>
                            <p>尝试收藏更多优质博文吧！</p>
                        </div>
                    `;
                return;
            }

            posts.forEach(post => {
                const card = document.createElement('article');
                card.className = 'post-card animate__animated animate__fadeInUp';
                card.innerHTML = `
                        <div class="card-media">
                            <img src="${post.imageurl}" alt="${post.title}">
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">${post.title}</h3>
                            <p class="card-excerpt">${post.brief}</p>
                            <div class="card-actions">
                                <button class="action-btn"
                                    onclick="location.href='/api/v1/post/searchpidHTML?id=${post.pid}'">
                                    <svg viewBox="0 0 24 24">
                                        <path d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
                                    </svg>
                                    查看详情
                                </button>
                            </div>
                        </div>
                    `;
                grid.appendChild(card);
            });
        }

        // 创建单个帖子行的函数
        function createPostRow(post) {
            const row = document.createElement('tr');

            // 图片列
            const photoCell = document.createElement('td');
            const imgElement = document.createElement('img');
            imgElement.src = post.imageurl;
            imgElement.style.maxWidth = '200px';
            imgElement.style.maxHeight = '120px';
            photoCell.appendChild(imgElement);
            row.appendChild(photoCell);

            // 标题列
            const titleCell = document.createElement('td');
            titleCell.textContent = post.title;
            row.appendChild(titleCell);

            // 简介列
            const briefCell = document.createElement('td');
            briefCell.textContent = post.brief;
            row.appendChild(briefCell);

            // 操作按钮列
            const actionButtonCell = document.createElement('td');

            // 查看按钮
            const moreButton = document.createElement('button');
            moreButton.innerHTML = `
                <svg style="width:16px;height:16px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
                </svg>
                查看详情
            `;
            moreButton.onclick = () => window.location.href = `/api/v1/post/searchpidHTML?id=${post.pid}`;

            actionButtonCell.append(moreButton);
            row.appendChild(actionButtonCell);

            return row;
        }

        // 搜索过滤函数
        function filterPosts(searchTerm) {
            if (!searchTerm) return allPosts;

            const lowerTerm = searchTerm.toLowerCase();
            return allPosts.filter(post => {
                const titleMatch = post.title.toLowerCase().includes(lowerTerm);
                const briefMatch = post.brief.toLowerCase().includes(lowerTerm);
                return titleMatch || briefMatch;
            });
        }

        // 初始化加载数据
        fetch('/user/postcollect', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Token': token
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    allPosts = data.data;
                    renderPosts(allPosts);
                } else {
                    if (data.msg) {
                        Swal.fire('错误', '获取帖子失败: ' + data.msg, 'error');
                    }
                    renderPosts([]);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('错误', '请求失败，请检查网络连接', 'error');
                renderPosts([]);
            });

        // 绑定搜索事件（添加300ms防抖）
        let searchTimeout;
        $('#searchInput').on('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                const filtered = filterPosts($(this).val().trim());
                renderPosts(filtered);
            }, 300);
        });

    });
</script>
</body>
</html>